<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>滑动条型数据区域缩放组件</title>
    <script src="../echarts.min.js"></script>
</head>
<body>
    <div id="main" style="height: 600px;width: 400px;"></div>
</body>
<script>
    let mychart = echarts.init(document.getElementById("main"))
    option = {
        dataZoom:[{
            id:'dataZoomX',
            type:"slider",
            xAxisIndex:[0],
            filterMode:"filter"
        },
        {
            id:"dataZoomY",
            type:"slider",
            yAxisIndex:[0],
            filterMode:"empty"
        }
        ],
        title:{
            text:"滑动条型",
            subtext:"数据区域缩放组件",
            left:"center"
        },
        tooltip:{},
        xAxis:{type:"value"},
        yAxis:{type:"value"},
        series:{
            //第一条对应x轴,第二条对应y轴
            type:'bar',
            data:[
                //第一条对应X轴,第二条对应Y轴
                [10,20],
                [20,50],
                [5,20],
                [2,10]
            ]
        }
    } 
    mychart.setOption(option)
</script>
</html>